<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
      <div class="absolute top-40 left-40 w-80 h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container mx-auto px-8 py-10 pt-32 relative z-10">
      <!-- 页面标题 -->
      <div class="text-center mb-16">
        <h1 class="text-5xl font-bold mb-6 text-gray-900">意见反馈</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          您的反馈对我们非常重要！我们致力于不断改进平台，为用户提供更好的学习体验。
        </p>
      </div>

      <!-- 反馈表单 -->
      <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8">
          <form @submit.prevent="submitFeedback" class="space-y-8">
            <!-- 反馈类型 -->
            <div>
              <label class="block text-lg font-semibold text-gray-900 mb-4">反馈类型</label>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <label v-for="type in feedbackTypes" :key="type.value" class="flex items-center p-4 border-2 border-gray-200 rounded-2xl cursor-pointer hover:border-blue-300 transition-colors" :class="{ 'border-blue-500 bg-blue-50': selectedType === type.value }">
                  <input type="radio" :value="type.value" v-model="selectedType" class="sr-only">
                  <div class="w-6 h-6 border-2 border-gray-300 rounded-full mr-3 flex items-center justify-center" :class="{ 'border-blue-500': selectedType === type.value }">
                    <div v-if="selectedType === type.value" class="w-3 h-3 bg-blue-500 rounded-full"></div>
                  </div>
                  <div>
                    <div class="font-medium text-gray-900">{{ type.label }}</div>
                    <div class="text-sm text-gray-500">{{ type.description }}</div>
                  </div>
                </label>
              </div>
            </div>

            <!-- 反馈标题 -->
            <div>
              <label for="title" class="block text-lg font-semibold text-gray-900 mb-3">反馈标题</label>
              <input 
                id="title"
                v-model="feedbackForm.title"
                type="text" 
                placeholder="请简要描述您的问题或建议"
                class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl text-lg focus:border-blue-500 focus:outline-none transition-colors"
                required
              >
            </div>

            <!-- 反馈内容 -->
            <div>
              <label for="content" class="block text-lg font-semibold text-gray-900 mb-3">详细描述</label>
              <textarea 
                id="content"
                v-model="feedbackForm.content"
                rows="6"
                placeholder="请详细描述您遇到的问题、建议或想法..."
                class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl text-lg focus:border-blue-500 focus:outline-none transition-colors resize-none"
                required
              ></textarea>
            </div>

            <!-- 联系方式 -->
            <div>
              <label for="contact" class="block text-lg font-semibold text-gray-900 mb-3">联系方式（可选）</label>
              <input 
                id="contact"
                v-model="feedbackForm.contact"
                type="text" 
                placeholder="邮箱、手机号或微信号，方便我们回复您"
                class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl text-lg focus:border-blue-500 focus:outline-none transition-colors"
              >
            </div>

            <!-- 附件上传 -->
            <div>
              <label class="block text-lg font-semibold text-gray-900 mb-3">附件上传（可选）</label>
              <div class="border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center hover:border-blue-400 transition-colors">
                <el-upload
                  class="upload-demo"
                  drag
                  action="#"
                  :auto-upload="false"
                  :on-change="handleFileChange"
                  :file-list="fileList"
                  multiple
                >
                  <el-icon class="el-icon--upload text-4xl text-gray-400 mb-4"><UploadFilled /></el-icon>
                  <div class="el-upload__text text-gray-600">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip text-gray-500">
                      支持 jpg/png/pdf/doc/docx 文件，单个文件不超过 10MB
                    </div>
                  </template>
                </el-upload>
              </div>
            </div>

            <!-- 提交按钮 -->
            <div class="text-center pt-8">
              <button 
                type="submit" 
                :disabled="isSubmitting"
                class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-12 py-4 rounded-2xl text-xl font-semibold transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
              >
                <el-icon v-if="isSubmitting" class="animate-spin mr-2"><Loading /></el-icon>
                {{ isSubmitting ? '提交中...' : '提交反馈' }}
              </button>
            </div>
          </form>
        </div>

        <!-- 其他联系方式 -->
        <div class="mt-12 text-center">
          <p class="text-gray-600 mb-6">您也可以通过以下方式联系我们：</p>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
              <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <el-icon class="text-blue-600 text-2xl"><Message /></el-icon>
              </div>
              <h4 class="font-semibold text-gray-900 mb-2">邮箱反馈</h4>
              <p class="text-blue-600">feedback@edulivelink.com</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
              <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <el-icon class="text-green-600 text-2xl"><ChatDotRound /></el-icon>
              </div>
              <h4 class="font-semibold text-gray-900 mb-2">在线客服</h4>
              <p class="text-green-600">工作日 9:00-18:00</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
              <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <el-icon class="text-purple-600 text-2xl"><Phone /></el-icon>
              </div>
              <h4 class="font-semibold text-gray-900 mb-2">电话咨询</h4>
              <p class="text-purple-600">400-123-4567</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { UploadFilled, Loading, Message, ChatDotRound, Phone } from '@element-plus/icons-vue'

const selectedType = ref('bug')
const isSubmitting = ref(false)
const fileList = ref([])

const feedbackTypes = [
  { value: 'bug', label: '问题反馈', description: '功能异常或使用问题' },
  { value: 'suggestion', label: '功能建议', description: '新功能或改进建议' },
  { value: 'experience', label: '体验反馈', description: '使用体验相关' }
]

const feedbackForm = reactive({
  title: '',
  content: '',
  contact: ''
})

const handleFileChange = (file, fileList) => {
  // 处理文件上传
  console.log('文件变化:', file, fileList)
}

const submitFeedback = async () => {
  if (!feedbackForm.title.trim() || !feedbackForm.content.trim()) {
    ElMessage.warning('请填写反馈标题和详细描述')
    return
  }

  try {
    isSubmitting.value = true
    
    // 模拟提交过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 显示成功消息
    ElMessage.success('感谢您的反馈！我们会认真处理您的建议。')
    
    // 重置表单
    feedbackForm.title = ''
    feedbackForm.content = ''
    feedbackForm.contact = ''
    selectedType.value = 'bug'
    fileList.value = []
    
  } catch (error) {
    ElMessage.error('提交失败，请稍后重试')
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
</style>



